<template>
    <div v-if="this.orderListData[this.index]" class="OrderDetail">
        <h2>
            <p>订单号：{{ orderNumber }}</p>
            <span>{{ orderStatus(this.orderListData[this.index]) }}</span>
        </h2>
        <ul v-if="this.orderListData[this.index].orderType != 3 && this.orderListData[this.index].orderStatus != 1" class="bespokeBox">
            <li>
                <div class="bespokeLeft">
                    <img v-if="this.orderListData[this.index].cmSp.spIconUrl" :src="this.orderListData[this.index].cmSp.spIconUrl" alt="">
                </div>
                <div class="bespokeRight">
                    <p class="bespokeName">
                        <strong>{{ orderListData[this.index].cmSp.spName }}</strong>
                        <i :class="(this.orderListData[this.index].cmSp.sex =='男') ? 'iconfont icon-xingbienan' : 'iconfont icon-xingbienv'"></i>
                        <span class="bespokeYear">{{ orderListData[this.index].cmSp.sex }}</span>
                        <span class="bespokeYear">{{ orderListData[this.index].cmSp.age }}岁</span>
                    </p>
                    <p class="manyi">
                        <span>客户满意度：</span>
                        <i v-for="item in this.feel" :key="item.id" class="iconfont icon-xingxing"></i>
                        <i v-for="item in this.unfeel" :key='item.id' class="iconfont icon-xingxing fail"></i>
                    </p>
                    <p class="bespokeContent">
                        {{ orderListData[this.index].cmSp.content }}
                    </p>
                </div>
            </li>
        </ul>
        <h2 v-else-if="this.orderListData[this.index].orderType != 3 && this.orderListData[this.index].orderStatus == 1" style="line-height:2;fong-size:20px;color:#ccc;"> 请耐心等待师傅接单...</h2>
        <div v-if="this.orderListData[this.index].orderType != 3" class="sdDredge">
            <h2 class="repairTit">
                <strong></strong>
                <span>订单详情</span>
            </h2>
            <div class="repairSuccessContent" style="word-break: break-all;">
                <p style="color:#F56C6C"><span>预计到达：</span>{{ userArriveTime }}</p>
                <p><span>服务时间：</span>{{ scheduledTime }}</p>
                <p><span>服务项目：</span>{{ orderListData[this.index].cmItem.name }}</p>
                <p><span>联系人：</span>{{ orderListData[this.index].userName }}</p>
                <p><span>联系电话：</span>{{ userMobile }}</p>
                <p><span>地址：</span>{{ userAddress }}</p>
                <p ><span>留言：</span>{{ userNote || '无' }}</p>
            </div>
            <div class="orderBtn">
                <button style="background:#fff; color:#ff5622; border:1px solid #ff5622;float:left;" @click="toOrderList">返回订单列表</button>
                <button v-if="this.orderListData[this.index].orderStatus != 1 && this.orderListData[this.index].orderStatus != 4"> <a :href="'tel:'+this.orderListData[this.index].cmSp.spMobile" :style="{color:'#fff'}"> 联系维修师傅</a></button>
                <button v-else><a href="tel:0512-36919119" :style="{color:'#fff'}"> 联系管家客服</a></button>
            </div>
        </div>
        <div v-else  class="sdDredge">
            <h2 class="repairTit">
                <strong></strong>
                <span>订单详情</span>
            </h2>
            <div class="repairSuccessContent" style="word-break: break-all;">
                <p><img style="width:150px;height:150px;margin:0 auto;border-radius: 50%;" :src="orderListData[this.index].integralGoods.goodsPic[0]" alt=""></p>
                <p><span>商品名称:</span>{{ orderListData[this.index].integralGoods.goodsName}}</p>
                <p><span>联系电话：</span>{{ userMobile }}</p>
                <p><span>配送地址：</span>{{ userAddress }}</p>
                <p ><span>留言：</span>{{ userNote || '无' }}</p>
            </div>
            <div class="orderBtn">
                <button style="background:#fff; color:#ff5622; border:1px solid #ff5622;float:left;" @click="toOrderList">返回订单列表</button>
                <button><a href="tel:0512-36919119" :style="{color:'#fff'}"> 联系管家客服</a></button>

            </div>
        </div>
    </div>
</template>
<script>
import {mapState,mapGetters} from 'vuex'
export default {
    data(){
        return {
            index:this.$route.query.orderIndex
        }
    },
    computed:{
        ...mapState({
            orderListData:state => state.personModules.orderListData
        }),
        ...mapGetters({
            orderStatus:'personModules/orderStatus'
        }),
        orderNumber(){
            return this.orderListData[this.index].orderNumber;
        },
        scheduledTime(){
            return this.orderListData[this.index].scheduledTime;
        },
        // serviceName(){
        //     return this.orderListData[this.index].cmItem.name;
        // },
        // userName(){
        //     return this.orderListData[this.index].userName;
        // },
        userArriveTime(){
            return this.orderListData[this.index].arriveTime;
        },
        userMobile(){
            return this.orderListData[this.index].userMobile;
        },
        userAddress(){
            return this.orderListData[this.index].userAddress;
        },
        userNote(){
            return this.orderListData[this.index].note;
        },
        feel(){
            let arr = [];
            for(let i = 0; i < this.orderListData[this.index].cmSp.satisfaction; i ++){
                arr.push(i);
            }
            return arr;
        },
        unfeel(){
            let arr = [];
            for(let i = 0; i < 5 - this.orderListData[this.index].cmSp.satisfaction; i ++){
                arr.push(i);
            }
            return arr;
        }
    },
    methods:{
        toOrderList(){
            this.$router.push('/orderList');
        }
    }
}
</script>

<style lang="scss">
    @import '@/assets/style/order.scss';
</style>
